;
(function() {
  new Vue({
    el: '#financial_analysis',
    data: {
      data: [],
      listMenu: [{
        name: '正常',
        code: 'NM'
      }, {
        name: '即将到期',
        code: 'DU'
      }, {
        name: '已逾期',
        code: 'OD'
      }],
      customerName: '',
      selectedListMenuCode: ['NM'],
      selectedProjectId: null,
			projectList: [],
			buildingList: [],
			floorList: [],
			unitList: [],
			projectIDs: [],
			projectId: [],
			buildingId: [],
			floorId: [],
			unitId: [],
      isExtenseFlag: false,
      beginDate:'',
      endDate:'',
      groupId:null,
      groupOneData:[],
      groupTwoData:[],
      groupThreeData:[],
      selectedGroupData:[],
    },
    methods: {
      selectMenuList(){
        this.getData()
      },
      resetTabbar() {
        this.selectedListMenuCode = ['NM'];
        this.getData()
      },
      submitData() {
        var self = this;

        var data = {
          zlf_name: self.customerName || '#',
					project_ids: self.projectIDs.toString() || '#',
          project_id: self.projectId.length ? self.projectId[0] : '#',
          group_id: self.groupId || '#',
          building_id: self.buildingId.length ? self.buildingId[0] : '#',
          floor_id: self.floorId.length ? self.floorId[0] : '#',
          unit_id: self.unitId.length ? self.unitId[0] : '#',
          begin_date: self.beginDate || '#',
          end_date: self.endDate || '#',
          payment_state: '#',
          overdue_state: self.selectedListMenuCode.length ? self.selectedListMenuCode.join(',') : '#',
          bill_state: '#'
        }

        return data
      },
      getData: function() {
        var self = this;
        var data = self.submitData()

        hlhttp.get({
          url: 'bills/amount_received,amount_payed,amount_wpay',
          data: data,
          success: function(data) {
            // 渲染图表所需数据
            var chartData = [
              ['已收', Number(data.amountPayed)],
              ['未收', Number(data.amountWpay)]
            ]
            var count = hlNumberUtil.formatNum(data.amountReceived)
            self.renderChart(chartData, count)
          }
        })
      },
      resetData: function() {
        this.customerName = '';
        this.beginDate = '';
        this.endDate = '';
				this.projectId = []
        this.groupId = null
				this.buildingId = []
				this.floorId = []
				this.unitId = []
				this.buildingList = []
				this.floorList = []
				this.unitList = []
        this.selectedGroupData = []
        this.getData();
      },
      bindTitleEvent: function() {
        var self = this;
        $('#financial_analysis').on('click', '#textContainer', function() {
          var dataObj = self.submitData()
          dataObj['ddtab'] = true
          window.sessionStorage.setItem('zlf_name', dataObj['zlf_name'])
          hlUrlUtil.goTo('billList', dataObj, true)
        })
      },
      renderChart: function(data, count) {
        var self = this;
        $('#bill-chart').highcharts({
            colors: [
              '#5f68a1',
              '#f2a853',
            ],
            // 主标题
            title: {
              floating: true,
              useHTML: true,
              style: {
                color: '#333',
                fontWeight: 'normal',
                fontSize: '14px',
                top: '50%',
                left: '50%',
                transform: 'translate(0,-50%)',
                textAlign: 'center'
              },
              text: '<div id="textContainer" style="padding:20px 0;cursor:pointer">账单总结额<p>' + count + '</p></div>'
            },
            // 数据提示框
            tooltip: {
              shared: true,
              enabled: true,
              valueDecimals: 2,
              headerFormat: '<span class="font-size:14px">{point.key}</span>',
              pointFormat: '{point.y:.1f}' + '元',
              borderWidth: 0,
              style: {
                fontSize: '14px'
              }
            },
            // 数据列配置
            plotOptions: {
              pie: {
                enabled: false,
                showInLegend: false,
                color: 'white',
                shadow: false,
                borderWidth: 2,
                borderColor: '#fff',
                size: '87%',
                // 数据标签
                dataLabels: {
                  shared: true,
                  useHTML: true,
                  valueDecimals: 2,
                  enabled: true,
                  formatter: function() {
                    return this.point.name + hlNumberUtil.formatNum(this.point.y)
                  },
                  style: {
                    color: '#666',
                    fontFamily: 'Microsoft Yahei',
                    fontWeight: 'normal',
                    fontSize: '14px'
                  }
                }
              },
              series: {
                cursor: 'pointer',
                events: {
                  click: function(event) {
                    var point = event.point;
                    var dataObj = self.submitData();
                    var data = JSON.parse(JSON.stringify(dataObj))
                    data['ddtab'] = true
                    window.sessionStorage.setItem('zlf_name', dataObj['zlf_name'])
                    if (point.name === '未收') {
                      data['payment_state'] = 'WP,PPE';
                      data['ddtab'] = true
                      hlUrlUtil.goTo('billList', data, true)
                    }
                    if (point.name === '已收') {
                      data['payment_state'] = 'APE,PPE';
                      data['ddtab'] = true
                      hlUrlUtil.goTo('billList', data, true)
                    }
                  }
                }
              }
            },
            series: [{
              type: 'pie',
              innerSize: '60%',
              data: data
            }]
          },
          function(c) {
            // 环形图圆心
            var centerY = c.series[0].center[1];
            var titleHeight = parseInt(c.title.styles.fontSize);
            c.setTitle({
              y: centerY + titleHeight / 2
            });
            chart = c;
          }
        );
      },
			openSearch() {
			  if (this.isExtenseFlag == true) {
			    this.isExtenseFlag = false;
					this.projectId = []
					this.buildingId = []
					this.floorId = []
					this.unitId = []
					this.buildingList = []
					this.floorList = []
					this.unitList = []
			    return false;
			  }
			  if (this.isExtenseFlag == false) {
			    this.isExtenseFlag = true;
			    return false;
			  }
			},
			//获取项目
			getProjectData () {
			  hlhttp.get({
			    url: 'user/projects',
			    success: (res) => {
						res = hlArrayUtil.removeRepeat(res, 'projectId')
						res.map(item => {
							this.projectIDs.push(item.projectId)
						})
			      this.projectList = hlArrayUtil.replaceData(res, [{key: 'projectName', rKey: 'name'}, {key: 'projectId', rKey: 'code'}]);
						this.getData()
			    }
			  })
			},
      // 获取一级组合数据
      getGroupPrimaryData(data){
        const self = this
        self.projectId = [data[0].code]
        self.groupId = null
        self.buildingId = []
        self.floorId = []
        self.unitId = []
        self.buildingList = []
        self.floorList = []
        self.unitList = []
        self.selectedGroupData = []
        self.getGroupData().then(data => {
          self.groupOneData = hlArrayUtil.replaceData( data, [{key: 'id', rKey: 'code'}] );
        })

        self.getBuildingData()
      },
      // 选取一级组合数据
      selectOneGroup(res){
        const self = this
        this.groupId = res['cur']['code']
        this.getGroupData().then(data => {
          self.groupTwoData = hlArrayUtil.replaceData( data, [{key: 'id', rKey: 'code'}] )
          self.getBuildingData()
        })
      },
      // 选取二级组合数据
      selectTwoGroup(res){
        const self = this
        this.groupId = res['cur']['code']
        this.getGroupData().then(data => {
          self.groupThreeData = hlArrayUtil.replaceData( data, [{key: 'id', rKey: 'code'}] )
          self.getBuildingData()
        })
      },
      // 选取三级组合数据
      selectThreeGroup(res){
        this.groupId = res['cur']['code']
      },
      getGroupData(){
        const self = this

        return new Promise(resolve => {
          hlhttp.get({
            url:'project/grouping_info/_subclass',
            data:{'project_id':self.projectId[0] , 'grouping_id':self.groupId || '#' },
            success:function(data){
              resolve(data)
            }
          })
        })
      },
			//获取楼宇
			getBuildingData () {
        const self = this

			  hlhttp.get({
			    url: 'project/grouping/_building',
			    data: { project_id: self.projectId.length ? self.projectId[0] : '#'  , grouping_id:self.groupId || '#'},
			    success: (res) => {
			      this.buildingList = hlArrayUtil.replaceData(res, [{key: 'buildingId', rKey: 'code'}]);
			    }
			  })
			},
			//获取楼层
			getfloorData () {
			  hlhttp.get({
			    url: 'building/floors',
			    data: {project_id: this.projectId[0], building_id: this.buildingId[0]},
			    success: (res) => {
			      this.floorList = hlArrayUtil.replaceData(res, [{key: 'floorName', rKey: 'name'}, {key: 'floorId', rKey: 'code'}]);
			    }
			  })
			},
			//获取单元
			getunitData () {
			  hlhttp.get({
			    url: 'floor/units',
			    data: {project_id: this.projectId[0], building_id: this.buildingId[0], floor_id: this.floorId[0]},
			    success: (res) => {
			      this.unitList = hlArrayUtil.replaceData(res, [{key: 'unitName', rKey: 'name'}, {key: 'unitId', rKey: 'code'}]);
			    }
			  })
			},
			//点击楼宇获得 id
			getbuildingId (arr) {
			  this.buildingId = [arr[0].code];
			  this.getfloorData()
			   this.floorId = [];
			  this.unitId = [];
			},
			//点击楼层获得 id
			getfloorId (arr) {
			  this.floorId = [arr[0].code];
			  this.getunitData()
			  this.unitId = [];
			},
			// 点击单元获得 id
			getunitId (arr) {
			  this.unitId = [arr[0].code];
			},
    },
    mounted: function() {
      var self = this;
			hlSelectUi(true)
      self.bindTitleEvent()
			this.getProjectData()
    }

  })
}())
